<template>
	<u-popup v-model="popupVisible" mode="bottom" border-radius="14" z-index="9999" @close="$popupClose"
		:safe-area-inset-bottom="true">
		<view class="product-title">
			<image class="pop-img" :src="dataForm.img"></image>
			<view>
				<text v-if="specActItem.integral > 0">{{ specActItem.integral }}积分</text>
				<template v-if="specActItem.price > 0">
					<text v-if="specActItem.integral > 0">+</text>
					<text class="price_sign">￥</text>
					{{ specActItem.price }}
				</template>
			</view>
		</view>
		<scroll-view scroll-y class="spec_scroll">
			<view class="spec_main">
				<view class="spec_box" v-for="(classItem,classIndex) in classList" :key="classIndex">
					<view class="spec_title">{{classList.length > 1?classItem.name:''}}</view>
					<view class="prod-spec-list">
						<block v-for="(item, index) in typeList[classIndex]" :key="index">
							<view class="prod-spec-item"
								:class="{ 'disabled':item.disabled,'prod-spec-act': index === classItem.current }"
								@click="$specChange(index,classIndex)">
								<view class="post_dis" v-if="item.disabled">缺货</view>
								<text class="u-line-1">{{ item.name }}</text>
							</view>
						</block>
					</view>
				</view>
			</view>
			<div class="buy_num">
				<view>数量</view>
				<u-number-box v-model="specNum" input-height="54" input-width="104" :max="buyMax">
				</u-number-box>
			</div>
		</scroll-view>
		<view :class="['pop-btn',specActItem.integral<=0 && specActItem.price<=0? 'disable':'']" @click="$submitProd">立即兑换</view>
	</u-popup>
</template>

<script>
	export default {
		props: {
			value: {
				type: Boolean,
				default: false
			}, // 绑定弹框显隐
			dataForm: {
				type: Object,
				default: () => {
					return {}
				}
			}
		},
		data() {
			return {
				popupVisible: false,
				specActItem: {},
				specActIndex: -1, // 当前选中的规格
				specNum: 0,
				classList: [],
				typeList: [],
				buyMax: 0
			}
		},
		watch: {
			value(val) {
				if (val) {
					this.popupVisible = true
				}
			},
			dataForm(val) {
				if (val && val.pk_id) {
					this.specActItem = {} // 为了重置规格
					this.initSpec();
				}
			}
		},
		mounted() {

		},
		methods: {
			//关闭弹框
			$popupClose() {
				this.popupVisible = false;
				this.$emit('input', false);
			},
			initSpec() {
				if (!this.specActItem.pk_id) {
					this.specActIndex = 0
					this.specActItem = {
						...this.dataForm.product_stock[0]
					}
					this.specNum = this.specActItem.stock > 0 ? (this.dataForm.max_num > 0 ? 1 : 0) : 0
					this.initClassName()
					this.setNum()
				}
			},
			// 设置相关数量
			setNum() {
				this.$emit('changeSpec', this.specActIndex)
				let buyMax = this.specActItem.stock
				if (this.dataForm.max_num < this.specActItem.stock) {
					buyMax = this.dataForm.max_num
				}
				this.buyMax = buyMax > 0 ? buyMax : 0
				this.specNum = this.specNum > this.buyMax ? this.buyMax : this.specNum
			},
			// 初始化多级规格属性
			initClassName() {
				let typeList = []
				if (this.dataForm.stock_name) {
					typeList = JSON.parse(this.dataForm.stock_name)
				}
				if (this.dataForm.type_name && this.dataForm.type_name[0]) {
					this.classList = this.dataForm.type_name.map((name) => {
						return {
							current: null,
							name: name
						}
					})
				} else {
					let classList = []
					for (var index = 0; index < typeList.length; index++) {
						classList.push({
							current: null,
							name: `属性${index}`
						})
					}
					this.classList = [].concat(classList)
				}
				// 设置规格值的选中下标
				let nameArr = this.dataForm.product_stock[this.specActIndex].name.split('_')
				nameArr.forEach((name, classIndex) => {
					typeList[classIndex].some((typeName, typeIndex) => {
						if (name == typeName) {
							this.classList[classIndex].current = typeIndex
							return true
						} else {
							return false
						}
					})
				})
				this.setTypeList(typeList)
			},
			// 切换规格
			$specChange(index, classIndex) {
				this.$u.debounce(
					() => {
						if (this.classList[classIndex].current === index) {
							return
						}
						this.$loading()
						this.classList[classIndex].current = index
						let newName = ''
						this.classList.forEach((classItem, classIndex) => {
							newName += (classIndex == 0 ? '' : '_') + this.typeList[classIndex][classItem
								.current
							].name
						})
						this.specActIndex = this.dataForm.product_stock.findIndex((item) => {
							return item.name == newName
						})
						let obj = this.dataForm.product_stock[this.specActIndex]
						this.specActItem = {
							...obj
						}
						this.setNum()
						this.setTypeList()
						this.$hide()
					},
					300,
					true
				);
			},
			// 设置规格值列表
			setTypeList(list) {
				if (list) { // 初始化
					this.typeList = list.map((newArr, classIndex) => {
						let oldSpecStr = this.specActItem.name
						return newArr.map((name, nameIndex) => {
							let newSpecArr = oldSpecStr.split('_')
							newSpecArr.splice(classIndex, 1, name)
							let hasSome = this.dataForm.product_stock.some((item) => {
								return item.name == newSpecArr.join('_')
							})
							return {
								disabled: !hasSome,
								name: name
							}
						})
					})
				} else {
					// 规格变化
					let typeList = this.typeList
					typeList.forEach((newArr, classIndex) => {
						let oldSpecStr = this.specActItem.name
						return newArr.map((typeNameArr, nameIndex) => {
							let newSpecArr = oldSpecStr.split('_')
							newSpecArr.splice(classIndex, 1, typeNameArr.name)
							let hasSome = this.dataForm.product_stock.some((item) => {
								return item.name == newSpecArr.join('_')
							})
							this.typeList[classIndex][nameIndex].disabled = !hasSome
							// return {
							// 	disabled: !hasSome,
							// 	name: name
							// }
						})
					})
				}
			},
			$submitProd() {
				if (this.specActItem.integral <= 0 && this.specActItem.price <= 0) {
					return
				} else if (this.specNum <= 0) {
					// 是否已选数量
					this.$toast('请先选择数量')
					return
				}
				this.$popupClose();
				this.$emit('submit', {
					...this.specActItem,
					specNum: this.specNum
				})
			}
		}
	}
</script>
<style lang="scss" scoped>
	.product-title {
		padding: 30rpx;
		display: flex;
		align-items: flex-end;
		font-size: 30rpx;
		color: $sww-theme-price;

		.pop-img {
			width: 150rpx;
			height: 150rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}

		.price_sign {
			font-size: 24rpx;
		}
	}

	.spec_scroll {
		max-height: 550rpx;
		flex: 1;
		overflow: hidden;
		padding: 0 30rpx;

		.spec_main {
			min-height: 300rpx;
		}

		.spec_box {
			margin-top: 10rpx;

			.spec_title {
				color: #000;
				padding: 20rpx 0 20rpx;
				border-top: 2rpx solid #F2F2F0;
			}

			.prod-spec-list {
				width: 100%;
				display: flex;
				flex-wrap: wrap;

				.prod-spec-item {
					min-width: 160rpx;
					max-width: 100%;
					padding: 0 30rpx;
					height: 52rpx;
					border-radius: 26rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					color: #666666;
					margin: 0 20rpx 20rpx 0;
					position: relative;

					&.disabled {
						background-color: #eee;

						&::after {
							border: 1rpx solid #eee;
						}
					}

					.post_dis {
						position: absolute;
						padding: 2rpx 10rpx;
						top: -16rpx;
						right: -24rpx;
						background-color: #cbcbcb;
						border-top-left-radius: 10rpx;
						border-bottom-right-radius: 10rpx;
						color: #fff;
						z-index: 10;
						font-size: 20rpx;
					}

					&::after {
						content: '';
						width: 199.8%;
						height: 199.7%;
						border-radius: 52rpx;
						border: 1rpx solid #666666;
						position: absolute;
						top: 0;
						left: 0;
						transform: scale(0.5, 0.5);
						pointer-events: none;
						transform-origin: 0 0;
					}
				}

				.prod-spec-act {
					background-color: var(--color);
					color: #ffffff;

					&::after {
						border: none;
					}
				}
			}
		}

	}

	.buy_num {
		border-top: 2rpx solid #f2f2f2;
		margin: 20rpx 0 40rpx;
		padding-top: 20rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.pop-btn {
		width: 690rpx;
		text-align: center;
		color: #fff;
		font-size: 30rpx;
		background-color: var(--color);
		line-height: 80rpx;
		border-radius: 40rpx;
		margin: 10rpx auto;

		&.disable {
			background-color: #ccc;
		}
	}
</style>
